<template>

    <view :style="{ ...processStyle(boxStyle()) }" class="hot-image">
        <view class="hot-image-box" :style="{ height: imageHeight + 'px' }">
            <image :src="itemData.params.imgUrl" @load="handleImageLoad" :style="{ ...processStyle(imgStyle()) }"
                mode="widthFix" />
            <view class="hot" v-for="item, idx in itemData.data" :key="idx" :style="{
                height: item.height * 100 + '%',
                width: item.width * 100 + '%',
                left: item.x * 100 + '%',
                top: item.y * 100 + '%'
            }" @click="gotoPages(item)"></view>
        </view>
    </view>
</template>
<script>
export default {
    props: ['itemData', 'userInfo'],
    data() {
        return {
            imageHeight: undefined
        }
    },
    methods: {
        handleImageLoad(e) {
            const { width: originalWidth, height: originalHeight } = e.detail;
            uni.createSelectorQuery()
                .in(this)
                .select('.hot-image-box')
                .boundingClientRect(res => {
                    if (res) {
                        const containerWidth = res.width;
                        const aspectRatio = originalHeight / originalWidth;
                        const calculatedHeight = containerWidth * aspectRatio;
                        this.imageHeight = calculatedHeight;
                    }
                })
                .exec();
        },
        boxStyle() {
            let style = {}
            for (let i in this.itemData?.style) {
                if (i.startsWith('box_')) {
                    style[i.replace('box_', '')] = this.itemData.style[i]
                }
            }
            return style
        },
        imgStyle() {
            let style = {}
            for (let i in this.itemData?.style) {
                if (i.startsWith('img_')) {
                    style[i.replace('img_', '')] = this.itemData.style[i]
                }
            }
            return style
        },
        processStyle(style) {
            const processedStyle = {};
            for (const key in style) {
                const value = style[key];
                // 处理需要单位的属性
                if (key.startsWith('padding') || key.startsWith('margin') ||
                    key.endsWith('Width') || key.endsWith('Height') ||
                    key.endsWith('Radius')) {
                    processedStyle[key] = typeof value === 'number' ? `${value}px` : value;
                }
                // 处理不需要单位的属性
                else if (key === 'flex' || key === 'zIndex' || key === 'opacity') {
                    processedStyle[key] = value;
                }
                // 其他属性可以根据需要添加处理逻辑
                else {
                    processedStyle[key] = value;
                }
            }
            return processedStyle;
        },
        gotoPages(e) {
            this.gotoPage(e.linkUrl);
        }
    }
}
</script>
<style lang="scss" scoped>
.hot-image {
    width: 100%;
    box-sizing: border-box;

    .hot-image-box {
        position: relative;
        overflow: hidden;
        width: 100%;

        image {
            max-width: '100%';
            width: 100%;
        }

        .hot {
            position: absolute;
        }
    }
}
</style>